import React, { useEffect } from 'react'

const ConfirmDialog = ({ title, showModel, children, onSuccess, onCancel }) => {

    useEffect(() => {
        const dialog = document.getElementById('my_modal_1');
        if (showModel) {
            dialog.showModal();
        } else {
            dialog.close();
        }
    }, [showModel])

    const succcess = () => {
        onSuccess && onSuccess()
    }

    const cancel = () => {
        const dialog = document.getElementById('my_modal_1');
        dialog.close();
        onCancel && onCancel()
    }

    return (
        <dialog id="my_modal_1" className="modal">
            <div className="modal-box">
                <h3 className="font-bold text-lg">{title}</h3>
                {children}
                <div className="modal-action">
                    <div className='flex flex-row justify-around'>
                        <button className="btn bg-error btn-sm text-white" onClick={cancel}>取消</button>
                        <button className="btn bg-primary  btn-sm text-white" onClick={succcess} >确定</button>
                    </div>
                </div>
            </div>
        </dialog>
    )
}

export default ConfirmDialog